<template>
     <Modal  v-model="data" :title="title" @on-ok="ok" @on-cancel="cancel" :width="modalWidth">
       <Form  ref="form" :model="form" :label-width="70" :rules="userFormValidate">
         <Form-item label="复制到" prop="orgId">
                     <department-tree-choose  @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
                </Form-item> 
        </Form>  
         <slot></slot>
    </Modal>
</template>

<script>
import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
export default {
name:'ui-design-copy',
components:{
     departmentTreeChoose
},
  props: {
    // 对话框标题
    title: {
      type: String,
          default: "复制界面"
    },
    datas:{
            type: Object,
      default:function(){
        return {
            id:null,
        }
      }
    },
    // 对话框显示隐藏
    value: {
      type: Boolean,
      default: false
    },
    // 对话框宽度，高度自适应
    modalWidth: {
      type: Number,
      default: "520"
    }
  },
  data() {
    return {
      data: this.value,
      form: {
                orgId:null,
                 id:null
                },
                 userFormValidate: {
                   orgId: [
                        { required: true, message: "组织机构不能为空", trigger: "blur" }
                    ],
                },
    };
  },
  watch: {
    value(val) {
      this.data = val;
      if(val){
          this.form.orgId=this.datas.orgId;
             this.form.id=this.datas.id;
          this.$refs.depTree.departmentTitle=this.setTree(this.$refs.depTree.dataDep,this.datas.orgId);
          this.$refs.depTree.departmentId= this.datas.orgId;
          this.$refs.depTree.initDepartmentData();        
      }
    }
  },
  methods: {
     setTree(datas,id){ //遍历树  获取id数组
      let a=[];
       for(var i in datas){
          if(datas[i].id==id){
          return  datas[i].title
          }
          if(datas[i].children){
              this.setTree(datas[i].children,id);
          }
      }
},
   ok() {
      this.$emit("changeVal", {modal:false,button:true,form:this.form});
    },
    cancel() {
      this.$emit("changeVal", {modal:false,button:false,form:{}});
    },
      handleSelectDepTree(v) {
                if(v.constructor === Array){
         this.form.orgId = v[0];
        }else{
         this.form.orgId = v;
        } 
            },
  },

}
</script>
<style lang="less" scoped>
.split-atrr{
  width: 100%;
  height: 100%;
}
.designItem{
  margin-bottom:10px ;
}
</style>